<template>
	<div class="app-container">
		<list-frames :loading="loading">
			<el-form slot="form" :model="queryData" ref="queryForm" size="small" :inline="true" v-if="showSearch">
				<el-form-item prop="userName">
					<el-input v-model="queryData.userName" placeholder="输入姓名" clearable style="width: 160px" />
				</el-form-item>
				<el-form-item prop="startDate">
					<el-date-picker v-model="queryData.startDate" v-bind="dateConfig" placeholder="选择开始日期"></el-date-picker>
				</el-form-item>
				<el-form-item prop="endDate">
					<el-date-picker v-model="queryData.endDate" v-bind="dateConfig" placeholder="选择截止日期"></el-date-picker>
				</el-form-item>
				<el-form-item prop="auditDate">
					<el-date-picker v-model="queryData.auditDate" v-bind="dateConfig" placeholder="选择审批日期"></el-date-picker>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" icon="el-icon-search" @click="queryTableData()">搜索</el-button>
				</el-form-item>
				<el-form-item>
					<el-button icon="el-icon-refresh" @click="handleResetQuery()">重置</el-button>
				</el-form-item>
			</el-form>
			<template slot="button">
				<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleOpenDialog()" v-hasPermi="['spm:leave:add']">新增</el-button>
				<template v-if="checkedIds.length > 0">
					<el-button type="danger" plain icon="el-icon-delete" size="mini" @click="handleDeleteData()" v-hasPermi="['spm:leave:remove']">
						删除
					</el-button>
				</template>
				<el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExportData()" v-hasPermi="['spm:leave:export']">
					导出
				</el-button>
			</template>
			<right-toolbar slot="handle" :showSearch.sync="showSearch" @queryTable="queryTableData()"></right-toolbar>
			<el-table slot="table" height="100%" :data="tableData" @selection-change="handleSelectionChange($event, 'leaveId')">
				<el-table-column type="selection" width="42" align="center" />
				<el-table-column label="姓名" prop="userName" min-width="150" />
				<el-table-column label="审批日期" align="center" prop="auditDate" min-width="100">
					<template slot-scope="scope">
						<span>{{ parseTime(scope.row.auditDate, '{y}-{m}-{d}') }}</span>
					</template>
				</el-table-column>
				<el-table-column label="开始日期" align="center" prop="startDate" min-width="100">
					<template slot-scope="scope">
						<span>{{ parseTime(scope.row.startDate, '{y}-{m}-{d}') }}</span>
					</template>
				</el-table-column>
				<el-table-column label="截止日期" align="center" prop="endDate" min-width="100">
					<template slot-scope="scope">
						<span>{{ parseTime(scope.row.endDate, '{y}-{m}-{d}') }}</span>
					</template>
				</el-table-column>
				<el-table-column label="地点" prop="targetAddress" min-width="150" />
				<el-table-column label="说明" prop="des" min-width="360" />
				<el-table-column label="操作" width="116" class-name="small-padding fixed-width">
					<template slot-scope="{ row }">
						<el-button type="text" icon="el-icon-edit" @click="handleOpenDialog(row.leaveId)" v-hasPermi="['spm:leave:edit']">修改</el-button>
						<el-button type="text" icon="el-icon-delete" @click="handleDeleteData(row.leaveId)" v-hasPermi="['spm:leave:remove']">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<template slot="page" v-if="dataCount > 0">
				<pagination :total="dataCount" :page.sync="queryData.pageNum" :limit.sync="queryData.pageSize" @pagination="queryTableData()" />
			</template>
		</list-frames>
		<form-dialog v-model="formDialog" :data-id="dataId" @finish="queryTableData()"></form-dialog>
	</div>
</template>

<script>
import formDialog from './form';
import listMixins from '../common/listMixins';
import { listLeave, delLeave } from '@/api/personnal/leave';
export default {
	name: 'Leave',
	mixins: [listMixins],
	components: { formDialog },
	data() {
		return {
			pageName: '因私出国',
			dateConfig: {
				type: 'date',
				clearable: true,
				style: { width: '142px' },
				valueFormat: 'yyyy-MM-dd'
			}
		};
	},
	computed: {
		userId() {
			return this.$route.query.id;
		},
		delFunction() {
			return eval(delLeave);
		},
		exportUrl() {
			return 'spm/level/export';
		}
	},
	methods: {
		//获取列表数据
		async getTableData() {
			let params = { ...this.queryData };
			console.log(params);
			let result = await listLeave(params);
			console.log(result);
			this.loading = false;
			if (result.code === 200) {
				this.dataCount = result.total;
				this.tableData = result.rows || [];
			}
		}
	}
};
</script>
